<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
 <meta name="description" content="W3C SVG 1.1 Test Suite"/>
 <title>
SVG 1.1 test:masking-opacity-01-b </title>
 <style type="text/css">
 <!--
 body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 }
 .pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;}
 .pageSubTitle  { color: blue; font-size: 200%; font-weight: bold }
 .openChapter { color: blue; line-height: 1.3; font-weight: bold }
 .openSection { color: blue; line-height: 125%; font-weight: bold }
 .info { color: black; line-height: 1.2; font-size: 90%; }
 p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .linkbar { text-align: center; margin: 1em 1em 0.25em 1em;}
 blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .opscript {margin-left: 3%; margin-right: 3%; }
 .opscript p { margin-top: 0.7em}
 .navbar {background: black; color: white; font-weight: bold}
 -->
 </style>
 </head>
 <body class="bodytext">

	<div class="linkbar"> 
<p>
<a href="full-masking-opacity-01-b.html">Full version</a>, <a href="basic-masking-opacity-01-b.html">Basic version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/masking.html#ObjectAndGroupOpacityProperties">14.5 Object and group opacity: the 'opacity' property</a></p>
 <p>
				<a href="full-masking-mask-01-b.html">masking-mask-01-b ←</a> 
				<a href="full-index.html">index</a>
				<a href="full-masking-path-01-b.html">→ masking-path-01-b</a>
						</p></div>

	<table align="center" border="0" cellspacing="0" cellpadding="10">
		<tr>
			<td align="center" colspan="3">
				<table border="0" cellpadding="8">
					<tr>
						<td align="center" colspan="2" class="pageTitle">
							<h1>masking-opacity-01-b</h1>
						</td>
					</tr>
					<tr  class="navbar">
						<td align="center">
							SVG Image
						</td>
						<td align="center">
							PNG Image
						</td>
					</tr>
					<tr>
						<td align="right">
   	    		  			
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="" id="mySVGViewerObj" width=480 height=360>
    <param name=movie value="../SvgViewer.swf">
    <param name="FlashVars" value="sourceType=url_svg&svgURL=../svggen/masking-opacity-01-b.svg">
    <param name="wmode" value="transparent">
    <embed play=false name="mySVGViewerObj" 
	    src="../SvgViewer.swf" quality=high wmode="transparent"
	    width=480 height=360 type="application/x-shockwave-flash"
	    FlashVars="sourceType=url_svg&svgURL=../svggen/masking-opacity-01-b.svg">
    </embed >
</object>
						</td>
						<td align="left">
							<img alt="raster image of masking-opacity-01-b" src="../png/full-masking-opacity-01-b.png" width="480" height="360"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

               
<div class="opscript">
			<p>
				Test to see the effect of applying an opacity property to a group.
			</p>
			<p>
				A blue rectangle with a green rectangle on top are contained in a
				group. This opacity of the group and the opacity of the rectangles are
				changed in this test. A red rectangle is provided in the background so
				that opacity changes are obvious visually.
			</p>
			<p>
				From top to bottom, the tests are as follows.
			</p>
			<p>
				In the top test, the opacities of the group and the individual rectangles are 
				all set to 1. As a result, the green rectangle should appear on top of the blue
				rectangle.
			</p>
			<p>
				In the second test, the group is given an opacity of 0.5. As a result, the blue
				rectangle should not show through in the region where the green and blue overlap.
			</p>
			<p>
				In the third test, the group maintains a group opacity of 1 whereas each individual
				rectangle is given an opacity of 0.5 in the group. As a result, the blue rectangle 
				should show through in the overlap region.
			</p>
			<p>
				Lastly, the group and individual rectangles are all given an opacity of 0.5. The
				result should be similar to the previous test only fainter (because the opacity) is
				resulting in less contribution.
			</p>
			<p>
				The rendered picture should match the reference image exactly, except for possible
				variations in the labelling text (per CSS2 rules).  
			</p>

		</div>
<div class="linkbar"> <p>
				<a href="full-masking-mask-01-b.html">masking-mask-01-b ←</a>
				<a href="full-index.html">index</a>
				<a href="full-masking-path-01-b.html">→ masking-path-01-b</a>
						</p></div>
</body>
</html>
